.bazi {
  .margins {
    margin: 0 auto;
    max-width: 1500px;
    padding: 0px 60px 30px 60px;

    /* ★ 导航 ★ */
    .navigations {

      /* 1、顶部左侧导航 */
      .leftNavigations {
        // float: left;
      }

      /* 2、顶部右侧导航 */
      .rightNavigations {
        float: right;
        margin-top: -21px;

        .spacing {
          margin-right: 20px;
        }

        .r {
          margin-right: -20px;
        }
      }

      .divider {
        margin: -20px 0 -15px 0;
      }
    }

    /* ★ 示例数据、选项 ★ */
    .sl-data {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

      /* 1.1、示例数据 */
      .sl-card {
        height: 500px;
        border-radius: 10px;
        margin-right: 10px;
        background-color: rgba(252, 252, 252);

        .header {
          font-size: 18px;
          text-align: center;
          margin: -13px 0 -20px 0;
        }

        // 1.1.1、基础
        .jc {
          border: none;
          border-radius: 0;
          margin: -37px -20px -20px -35px;
          background-color: rgba(255, 255, 255, 0);

          .data {

            .tag {
              width: 100%;
              border-radius: 5px;
            }

          }

        }

        // 1.1.2、命盘
        .mp {
          // border: black 1px solid;
          border: none;
          margin: -35px -35px -20px -15px;
          background-color: rgba(255, 255, 255, 0);

          .data {

            // 上半部分
            .top {
              height: 50px;
              font-weight: bold;
              background-color: rgb(200, 200, 200);
              border-top-left-radius: 5px;
              border-top-right-radius: 5px;

              .left {
                margin-left: 30px;

                .name {
                  float: left;
                  margin-top: 8px;
                  font-size: 24px;
                  color: rgb(80, 80, 80);
                }

                .mark {
                  color: rgb(80, 80, 80);
                  font-size: 14px;
                  vertical-align: -16px;
                }

                .date {
                  color: rgb(80, 80, 80);
                  padding-left: 50px;
                  vertical-align: -13px;

                  .mr {
                    margin-right: 50px;
                  }
                }
              }

              .right {
                float: right;
                margin-top: -28px;

                .sx {
                  cursor: pointer;
                  padding: 6px;
                  font-size: 22px;
                  color: rgb(193, 155, 79);
                  border: 2px solid rgb(193, 155, 79);
                  border-radius: 50px;
                  margin-right: 30px;
                  font-family: 楷体, serif;
                  text-shadow: 0 0 2px 2px rgba(207, 175, 76, 0.5);
                  box-shadow: 0 0 2px 2px rgba(207, 175, 76, 0.5);
                }
              }
            }

            // 下半部分
            .bottom {

              .rotate-text {
                // font-size: 3em;
                animation: rotate 5s infinite linear;
                display: inline-block;
                white-space: nowrap;
              }

              @keyframes rotate {
                from {
                  transform: rotate(0deg);
                }

                to {
                  transform: rotate(360deg);
                }
              }

              .title {
                font-size: 14px !important;
                color: rgb(160, 160, 160);
              }

              .title2 {
                line-height: 57px;
                font-size: 14px !important;
                color: rgb(160, 160, 160);
              }

              .title3 {
                line-height: 27px;
                font-size: 14px !important;
                color: rgb(160, 160, 160);
              }

              .bc1 {
                height: 35px;
                line-height: 35px;
                text-align: center;
                background-color: rgb(249, 249, 249);
                border-left: rgb(232, 234, 236) 1px solid;
                border-right: rgb(232, 234, 236) 1px solid;
              }

              .bc2 {
                height: 35px;
                line-height: 35px;
                text-align: center;
                background-color: rgb(242, 242, 242);
                border-left: rgb(232, 234, 236) 1px solid;
                border-right: rgb(232, 234, 236) 1px solid;
              }

              .bc3 {
                height: 35px;
                line-height: 35px;
                text-align: center;
                background-color: rgb(249, 249, 249);
                border-left: rgb(232, 234, 236) 1px solid;
                border-right: rgb(232, 234, 236) 1px solid;
                font-size: 22px;

                span {
                  font-size: 15px;
                }
              }

              .bc4 {
                height: 35px;
                line-height: 35px;
                text-align: center;
                background-color: rgb(242, 242, 242);
                border-left: rgb(232, 234, 236) 1px solid;
                border-right: rgb(232, 234, 236) 1px solid;
                font-size: 22px;

                span {
                  font-size: 15px;
                }
              }

              .bc5 {
                height: 57px;
                line-height: 18px;
                text-align: center;
                background-color: rgb(249, 249, 249);
                border-left: rgb(232, 234, 236) 1px solid;
                border-right: rgb(232, 234, 236) 1px solid;
                padding-top: 2px;
              }

              .bc6 {
                height: 57px;
                line-height: 18px;
                text-align: center;
                background-color: rgb(242, 242, 242);
                border-left: rgb(232, 234, 236) 1px solid;
                border-right: rgb(232, 234, 236) 1px solid;
                padding-top: 2px;
              }

              .bc7 {
                height: 35px;
                line-height: 35px;
                text-align: center;
                background-color: rgb(242, 242, 242);
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                border-left: rgb(232, 234, 236) 1px solid;
                border-right: rgb(232, 234, 236) 1px solid;
                border-bottom: rgb(232, 234, 236) 1px solid;
              }

            }

          }
        }
      }

      /* 1.2、示例数据加载框架 */
      .sl-card2 {
        height: 500px;
        border-radius: 10px;
        margin-right: 10px;
        background-color: white;
      }

      /* 2、选项 */
      .xx-card {
        height: 500px;
        border-radius: 10px;
        background-color: rgba(252, 252, 252);

        .el-input__prefix .el-input__inner {
          width: 20px;
        }

        .header {
          font-size: 18px;
          text-align: center;
          margin: -13px 0 -20px 0;
        }

        // 姓名
        .name {}

        // 占事
        .occupy {
          margin: 10px 0 0 0;
        }

        // 日期类型
        .dateType {
          float: left;
          margin: 18px 0 0 0;

          .segmented {
            --el-segmented-item-selected-color: rgb(255, 255, 255);
            --el-segmented-item-selected-bg-color: rgb(193, 155, 79);
            --el-border-radius-base: 16px;
          }
        }

        // 性别
        .sex {
          float: right;
          margin: 18px 0 0 0;

          .segmented {
            --el-segmented-item-selected-color: rgb(255, 255, 255);
            --el-segmented-item-selected-bg-color: rgb(193, 155, 79);
            --el-border-radius-base: 16px;
          }
        }

        // 日期
        .date {
          margin: 68px 0 0 0;

          .leapMonth {
            float: right;
            margin: 5px 0 0 0;
            color: rgb(70, 70, 70);
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
          }
        }

        // 真太阳时
        .trueSolar {
          margin: 10px 0 0 0;

          span {
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
          }

          .beta {
            color: rgb(255, 63, 63);
            font-size: 13px;
            border-radius: 5px;
            background-color: rgb(254, 228, 247);
            margin: 0 0 0 5px;
          }
        }

        // 地区
        .address {
          float: right;
          margin: -20px 0 0 0;

          .city {
            width: auto;
          }
        }

        // 起运流派
        .qiYunLiuPai {
          margin: 18px 0 0 0;

          .prefix {
            margin: 0 8px 0 5px;
            vertical-align: -3px;
          }

          .moren {
            float: right;
            color: #8492a6;
            font-size: 12px;
          }

          .tip {
            margin-left: 7px;
          }
        }

        // 重置全部选项
        .isRsettingAll {
          margin: 40px 0 0 0;
          float: left;
        }

        // 更多选项
        .moreOptions {
          margin: 40px 0 0 0;
          float: right;
        }

        // 开始排盘
        .starts {
          margin: 105px 0 0 0;
          text-align: center;

          .button {
            cursor: pointer;
            width: 100%;
            height: 50px;
            color: rgb(96, 98, 102);
            border: 1px rgb(150, 150, 150) solid;
            border-radius: 30px;
            font-size: 16px;
            background-color: rgb(251, 251, 251);
            transition: .3s;
          }

          .button:focus {
            color: rgb(96, 98, 102);
            background-color: rgb(249, 249, 249);
          }

          .button:hover {
            color: rgb(96, 98, 102);
            background-color: rgb(247, 247, 247);
            transition: .3s;
          }

          .button:active {
            color: rgb(96, 98, 102);
            background-color: rgb(243, 243, 243);
          }
        }


      }

    }

    /* ★ 完整数据 ★ */
    .wz-data {

      /* 1、完整数据切换选项 */
      .wzqh-card {
        min-height: 600px;
        border-radius: 0;
        border: none;
        margin-right: 10px;
        background-color: rgba(255, 255, 255, 0);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        .data {
          margin: -20px;

          .button1 {
            color: rgb(80, 80, 80);
            cursor: pointer;
            border: 1px rgb(228, 231, 237) solid;
            // border: none;
            height: 50px;
            line-height: 50px;
            border-radius: 10px;
            text-align: center;
            background-color: white;
            transition: .3s;
            margin-bottom: 10px;
            font-size: 15px;
          }

          .button1:hover {
            transition: .3s;
            // color: rgb(193, 155, 79);
            background-color: rgb(253, 253, 253);
          }

          .button2 {
            color: rgb(80, 80, 80);
            cursor: pointer;
            border: 1px rgb(228, 231, 237) solid;
            // border: none;
            height: 60px;
            line-height: 60px;
            border-radius: 10px;
            text-align: center;
            background-color: white;
            transition: .3s;
            margin-bottom: 5px;
            font-size: 15px;
          }

          .button2:hover {
            transition: .3s;
            // color: rgb(193, 155, 79);
            background-color: rgb(253, 253, 253);
          }

          .wxc {
            text-align: center;
            margin-top: 10px;

            .header {
              font-size: 13px;
              height: 30px;
              line-height: 30px;
              color: rgb(80, 80, 80);
              border: 1px rgb(232, 234, 236) solid;
              background-color: rgb(240, 240, 240);
              border-radius: 10px 10px 0 0;
              text-shadow: 1px 1px 2px rgb(200, 200, 200);
            }

            .c {
              border: 1px rgb(232, 234, 236) solid;
              border-top: none;
              background-color: white;

              .title {
                margin-right: 10px;
                height: 40px;
                line-height: 40px;
              }
            }

            .br {
              border-radius: 0 0 10px 10px;
            }

            .but {
              cursor: pointer;
              background-color: rgb(249, 249, 249);
              transition: .3s;
            }

            .but:hover {
              background-color: rgb(245, 245, 245);
              transition: .3s;
            }

          }

          .ml {
            margin-left: 20px;
          }

        }

      }

      /* 2.2、完整数据 */
      .wz-card {
        border: none;
        border-radius: 0;
        background-color: rgba(255, 255, 255, 0);
        margin: -20px;

        .data {

          .header {
            height: 60px;
            font-weight: bold;
            background-color: rgb(220, 220, 220);
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;

            .left {
              margin: 0 0 0 30px;
              padding: 9px 0 0 0;

              .name {
                float: left;
                font-size: 30px;
                color: rgb(80, 80, 80);
              }

              .mark {
                color: rgb(80, 80, 80);
                font-size: 18px;
                vertical-align: -14px;
              }

              .date {
                color: rgb(80, 80, 80);
                padding-left: 10px;
                vertical-align: -14px;

                .mr {
                  margin-right: 15px;
                }

                .ygz {
                  font-weight: normal;
                  font-size: 13px;
                }
              }
            }

            .right {
              float: right;
              margin-top: -32px;

              .sx {
                cursor: pointer;
                padding: 10px;
                font-size: 20px;
                color: rgb(193, 155, 79);
                border: 2px solid rgb(193, 155, 79);
                border-radius: 50px;
                margin-right: 30px;
                font-family: 楷体, serif;
                text-shadow: 0 0 2px 2px rgba(207, 175, 76, 0.5);
                box-shadow: 0 0 2px 2px rgba(207, 175, 76, 0.5);
              }
            }
          }

          .data {
            min-height: 550px;
            background-color: white;
            // border-bottom-left-radius: 10px;
            // border-bottom-right-radius: 10px;
            border-left: rgb(232, 234, 236) 1px solid;
            border-right: rgb(232, 234, 236) 1px solid;
            border-bottom: rgb(232, 234, 236) 1px solid;
            padding: 10px;
            color: rgb(80, 80, 80);

            // 基本信息
            .jiBen {

              .jb1 {
                border-radius: 0px;
                margin-bottom: 10px;
                border: rgb(232, 234, 236) 1px solid;

                .bc1 {
                  height: 28px;
                  line-height: 28px;
                  background-color: rgba(255, 255, 255, 0);

                  .title {
                    // font-weight: bold;
                    margin: 0 30px 0 30px;
                    color: rgb(160, 160, 160);
                  }

                  .title2 {
                    // font-weight: bold;
                    margin: 0 29px 0 30px;
                    color: rgb(160, 160, 160);
                  }

                  .title4 {
                    // font-weight: bold;
                    margin: 0 16px 0 30px;
                    color: rgb(160, 160, 160);
                  }

                  .null {
                    color: rgb(150, 150, 150);
                  }
                }

                .bc2 {
                  height: 28px;
                  line-height: 28px;
                  background-color: rgb(246, 246, 246);

                  .title {
                    // font-weight: bold;
                    margin: 0 32px 0 30px;
                    color: rgb(160, 160, 160);
                  }

                  .title2 {
                    // font-weight: bold;
                    margin: 0 29px 0 30px;
                    color: rgb(160, 160, 160);
                  }

                  .null {
                    color: rgb(150, 150, 150);
                  }

                }

                .blr {
                  // border-radius: 0 0 10px 10px;
                }

              }

              .jb2 {
                height: 230px;
                margin: 0 10px 10px 0;
                border: rgb(232, 234, 236) 1px solid;
                padding: 10px;

                .title {
                  float: left;
                  font-weight: bold;
                  font-size: 16px;
                  color: rgb(100, 100, 100);

                  .q {
                    font-size: 15px;
                    font-weight: normal;
                  }
                }

                .switch {
                  float: right;
                }

                .divider {
                  margin: 35px 0 -15px 0;
                }

                .progress {
                  margin-bottom: 10px;

                  .title-p {
                    margin: 0 15px 0 0;
                    font-size: 16px;
                    vertical-align: -2px;
                  }

                  .pro {
                    width: 93%;

                    .count {
                      color: rgb(80, 80, 80);
                      font-size: 14px;
                      vertical-align: -1px;
                    }
                  }

                }

              }

              .jb3 {
                // zoom: 0.9;
                height: 230px;
                margin: 0 0 10px 0;
                border: rgb(232, 234, 236) 1px solid;
                padding: 6px;

                .tips {
                  text-align: center;
                  margin-top: 5px;
                  font-size: 12px;
                  color: rgb(160, 160, 160);
                }

                .oy {
                  // height: 155px;
                  margin-top: -6px;
                  height: 150px;
                  overflow-y: auto;

                }

                .oy::-webkit-scrollbar {
                  width: 4px;
                  height: 4px;
                }

                .oy::-webkit-scrollbar-track {
                  // background: rgb(240, 240, 240);
                }

                .oy::-webkit-scrollbar-thumb {
                  // border-radius: 10px;
                  background: rgb(200, 200, 200);
                }

                .oy::-webkit-scrollbar-thumb:hover {
                  cursor: pointer;
                  background: rgb(185, 185, 185);
                }

                .oy::-webkit-scrollbar-corner {
                  background: rgb(185, 185, 185);
                }

                .jianju {
                  float: left;
                  width: 31%;
                  margin-right: 10px;
                  line-height: 26px;
                }

              }

              .jb4 {
                height: 30px;
                line-height: 28px;
                margin: 0 0 10px 0;
                border-radius: 10px;
                border: solid;
                animation: animateBorder 2.5s linear infinite;

                .average {
                  font-size: 17px;
                  font-weight: bold;
                  color: #bebebe;
                  text-align: center;
                }

                .ml {
                  margin-left: 80px;
                }
              }

              @keyframes animateBorder {
                0% {
                  border-image: linear-gradient(to right, rgb(255, 255, 160) 0%, rgb(160, 255, 255), rgb(255, 160, 255) 100%);
                  border-image-slice: 1;
                  border-width: 2px;
                  border-radius: 10px;
                }

                50% {
                  border-image: linear-gradient(to right, rgb(255, 160, 255) 0%, rgb(160, 255, 255), rgb(255, 255, 91) 100%);
                  border-image-slice: 1;
                  border-width: 2px;
                  border-radius: 10px;
                }

                100% {
                  border-image: linear-gradient(to right, rgb(255, 255, 160) 0%, rgb(160, 255, 255), rgb(255, 160, 255)100%);
                  border-image-slice: 1;
                  border-width: 2px;
                  border-radius: 10px;
                }
              }

              .jb5 {
                // height: 30px;
                // line-height: 30px;
                margin: 0 0 10px 0;
                border: rgb(232, 234, 236) 1px solid;
                padding: 10px;

                .title {
                  color: rgb(167, 130, 57);
                  font-weight: bold;
                }

                .mb {
                  margin-bottom: 10px;
                }

                .ml {
                  // margin-left: 5px;
                }

                .null {
                  color: rgb(150, 150, 150);
                }

                .tj {
                  text-align: center;
                  margin: 15px 0 0 0;
                  font-size: 16px;
                  color: rgb(167, 130, 57);

                  .title {
                    cursor: pointer;
                    transition: .3s;
                  }

                  .title:hover {
                    color: rgb(165, 118, 24);
                    transition: .3s;
                  }
                }
              }

              .jb6 {
                // height: 30px;
                // line-height: 30px;
                margin: 0 0 0 0;
                border: rgb(232, 234, 236) 1px solid;
                padding: 10px;

                .title {
                  text-align: center;
                  font-weight: bold;
                  font-size: 16px;
                  color: rgb(100, 100, 100);

                  .q {
                    font-size: 15px;
                    font-weight: normal;
                  }
                }

                .divider {
                  margin: -15px -10px -15px -10px;
                }

                .data2 {
                  .div {
                    margin: 0 0 10px 0;
                  }

                  .item {
                    background-color: rgb(249, 249, 249);
                    border: 1px rgb(232, 234, 236) solid;
                    padding: 10px;
                    // color: rgb(80, 80, 80);

                    .icon {
                      // font-size: 22px;
                      color: green;
                      margin-right: 10px;
                      text-align: center;
                    }
                  }

                  .mb2 {
                    margin-bottom: -10px;
                  }
                }

              }

              .jb7 {
                // height: 30px;
                // line-height: 30px;
                margin: 10px 0 0 0;
                border: rgb(232, 234, 236) 1px solid;
                padding: 10px;

                .title {
                  color: rgb(150, 150, 150);
                  font-weight: bold;
                  text-shadow: 2px 1px 2px rgb(210, 210, 210);
                }

                .mt {
                  margin-top: 10px;
                }

                .he {
                  color: green;
                }

                .chong {
                  color: rgb(255, 62, 55);
                }

              }

            }

            // 命盘信息
            .mingPan {

              // 神煞通用
              .ss {
                font-size: 13px;
                color: rgb(150, 150, 150);
              }

              // 命盘模式1（四柱）
              .mp1 {
                .title {
                  font-size: 14px !important;
                  color: rgb(160, 160, 160);
                }

                .title2 {
                  line-height: 57px;
                  font-size: 14px !important;
                  color: rgb(160, 160, 160);
                }

                .title3 {
                  line-height: 27px;
                  font-size: 14px !important;
                  color: rgb(160, 160, 160);
                }

                .ml {
                  padding-left: 14px;
                }

                .bc0 {
                  height: 35px;
                  line-height: 35px;
                  text-align: center;
                  background-color: rgb(254, 254, 254);
                  border-top: rgb(232, 234, 236) 1px solid;
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                  // border-top-left-radius: 10px;
                  // border-top-right-radius: 10px;

                  div {
                    width: 14%;
                    float: left;
                    color: rgb(140, 140, 140);
                    text-align: center;
                  }

                }

                .bc1 {
                  height: 35px;
                  line-height: 35px;
                  text-align: center;
                  background-color: rgb(254, 254, 254);
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                }

                .bc2 {
                  height: 35px;
                  line-height: 35px;
                  text-align: center;
                  background-color: rgb(245, 245, 245);
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                }

                .bc3 {
                  height: 35px;
                  line-height: 35px;
                  text-align: center;
                  background-color: rgb(254, 254, 254);
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                  font-size: 22px;

                  span {
                    font-size: 15px;
                  }
                }

                .bc4 {
                  height: 35px;
                  line-height: 35px;
                  text-align: center;
                  background-color: rgb(245, 245, 245);
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                  font-size: 22px;

                  span {
                    font-size: 15px;
                  }
                }

                .bc5 {
                  height: 57px;
                  line-height: 18px;
                  text-align: center;
                  background-color: rgb(254, 254, 254);
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                  padding-top: 2px;
                }

                .bc6 {
                  height: 57px;
                  line-height: 18px;
                  text-align: center;
                  background-color: rgb(245, 245, 245);
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                  padding-top: 2px;
                }

                .bc7 {
                  min-height: 170px;
                  text-align: center;
                  background-color: rgb(249, 249, 249);
                  // border-bottom-left-radius: 10px;
                  // border-bottom-right-radius: 10px;
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                  border-bottom: rgb(232, 234, 236) 1px solid;
                  padding-top: 2px;
                }
              }

              // 命盘模式2（四柱+大运、流年）
              .mp2 {

                .title {
                  width: 10% !important;
                  font-size: 14px !important;
                  color: rgb(160, 160, 160);
                }

                .title2 {
                  width: 10% !important;
                  line-height: 57px;
                  font-size: 14px !important;
                  color: rgb(160, 160, 160);
                }

                .ml {
                  padding-left: 10px;
                }

                .bc0 {
                  height: 35px;
                  line-height: 35px;
                  text-align: center;
                  background-color: rgb(254, 254, 254);
                  border-top: rgb(232, 234, 236) 1px solid;
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                  // border-top-left-radius: 5px;
                  // border-top-right-radius: 5px;

                  div {
                    width: 15%;
                    float: left;
                    color: rgb(140, 140, 140);
                    text-align: center;
                  }
                }

                .bc1 {
                  height: 35px;
                  line-height: 35px;
                  text-align: center;
                  background-color: rgb(254, 254, 254);
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;

                  div {
                    width: 15%;
                    float: left;
                    text-align: center;
                  }
                }

                .bc2 {
                  height: 35px;
                  line-height: 35px;
                  text-align: center;
                  background-color: rgb(245, 245, 245);
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;

                  div {
                    width: 15%;
                    float: left;
                    text-align: center;
                  }
                }

                .bc3 {
                  height: 35px;
                  line-height: 35px;
                  text-align: center;
                  background-color: rgb(254, 254, 254);
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                  font-size: 22px;

                  div {
                    width: 15%;
                    float: left;
                    text-align: center;
                  }

                  span {
                    font-size: 15px;
                  }
                }

                .bc4 {
                  height: 35px;
                  line-height: 35px;
                  text-align: center;
                  background-color: rgb(245, 245, 245);
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                  font-size: 22px;

                  div {
                    width: 15%;
                    float: left;
                    text-align: center;
                  }

                  span {
                    font-size: 15px;
                  }
                }

                .bc5 {
                  height: 57px;
                  line-height: 18px;
                  text-align: center;
                  background-color: rgb(254, 254, 254);
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                  padding-top: 2px;

                  div {
                    width: 15%;
                    float: left;
                    text-align: center;
                  }
                }

                .bc6 {
                  height: 57px;
                  line-height: 18px;
                  text-align: center;
                  background-color: rgb(245, 245, 245);
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                  padding-top: 2px;

                  div {
                    width: 15%;
                    float: left;
                    text-align: center;
                  }
                }

                .bc7 {
                  min-height: 180px;
                  text-align: center;
                  background-color: rgb(249, 249, 249);
                  // border-bottom-left-radius: 5px;
                  // border-bottom-right-radius: 5px;
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                  border-bottom: rgb(232, 234, 236) 1px solid;
                  padding-top: 2px;

                  div {
                    width: 15%;
                    text-align: center;
                  }
                }

              }

              // 命盘模式3（四柱+大运、流年、流月）
              .mp3 {

                .title {
                  width: 10% !important;
                  font-size: 14px !important;
                  color: rgb(160, 160, 160);
                }

                .title2 {
                  width: 10% !important;
                  line-height: 57px;
                  font-size: 14px !important;
                  color: rgb(160, 160, 160);
                }

                .ml {
                  padding-left: 10px;
                }

                .bc0 {
                  height: 35px;
                  line-height: 35px;
                  text-align: center;
                  background-color: rgb(254, 254, 254);
                  border-top: rgb(232, 234, 236) 1px solid;
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                  // border-top-left-radius: 10px;
                  // border-top-right-radius: 10px;

                  div {
                    width: 12.7%;
                    float: left;
                    color: rgb(140, 140, 140);
                    text-align: center;
                  }
                }

                .bc1 {
                  height: 35px;
                  line-height: 35px;
                  text-align: center;
                  background-color: rgb(254, 254, 254);
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;

                  div {
                    width: 12.7%;
                    float: left;
                    text-align: center;
                  }
                }

                .bc2 {
                  height: 35px;
                  line-height: 35px;
                  text-align: center;
                  background-color: rgb(245, 245, 245);
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;

                  div {
                    width: 12.7%;
                    float: left;
                    text-align: center;
                  }
                }

                .bc3 {
                  height: 35px;
                  line-height: 35px;
                  text-align: center;
                  background-color: rgb(254, 254, 254);
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                  font-size: 22px;

                  div {
                    width: 12.7%;
                    float: left;
                    text-align: center;
                  }

                  span {
                    font-size: 15px;
                  }
                }

                .bc4 {
                  height: 35px;
                  line-height: 35px;
                  text-align: center;
                  background-color: rgb(245, 245, 245);
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                  font-size: 22px;

                  div {
                    width: 12.7%;
                    float: left;
                    text-align: center;
                  }

                  span {
                    font-size: 15px;
                  }
                }

                .bc5 {
                  height: 57px;
                  line-height: 18px;
                  text-align: center;
                  background-color: rgb(254, 254, 254);
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                  padding-top: 2px;

                  div {
                    width: 12.7%;
                    float: left;
                    text-align: center;
                  }
                }

                .bc6 {
                  height: 57px;
                  line-height: 18px;
                  text-align: center;
                  background-color: rgb(245, 245, 245);
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                  padding-top: 2px;

                  div {
                    width: 12.7%;
                    float: left;
                    text-align: center;
                  }
                }

                .bc7 {
                  min-height: 180px;
                  text-align: center;
                  background-color: rgb(249, 249, 249);
                  // border-bottom-left-radius: 10px;
                  // border-bottom-right-radius: 10px;
                  border-left: rgb(232, 234, 236) 1px solid;
                  border-right: rgb(232, 234, 236) 1px solid;
                  border-bottom: rgb(232, 234, 236) 1px solid;
                  padding-top: 2px;

                  div {
                    width: 12.7%;
                    text-align: center;
                  }
                }

              }

              // 大运流年、五行旺衰、干支关系
              .dyln {
                min-height: 529px;
                min-width: 460px;
                margin-left: 10px;
                border: rgb(232, 234, 236) 1px solid;
                background-color: rgb(252, 252, 252);
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;

                .qy {
                  color: rgb(60, 60, 60);
                  padding: 2px 0 0 20px;
                  font-size: 14px;
                  border-bottom: rgb(232, 234, 236) 1px solid;

                  .title {
                    color: rgb(160, 160, 160);
                  }

                  .mingPanMode {
                    float: right;
                    margin: -17px 20px 0 0;

                    .segmented {
                      --el-segmented-item-selected-color: rgb(255, 255, 255);
                      --el-segmented-item-selected-bg-color: rgb(193, 155, 79);
                      --el-border-radius-base: 16px;
                    }
                  }
                }

                .shiShen1 {
                  width: 15px !important;
                  height: 34px !important;
                  line-height: 14px !important;
                  float: left !important;
                  padding: 2px 13px 0 20%;
                  font-size: 13px !important;
                  background-color: rgba(255, 255, 255, 0) !important;
                  // background-color: rgb(23, 234, 236);
                  // font-family: 楷体, serif;
                  border: none !important;
                }

                .shiShen2 {
                  width: 15px !important;
                  height: 34px !important;
                  line-height: 14px !important;
                  float: left !important;
                  padding: 2px 0 0 0;
                  font-size: 13px !important;
                  background-color: rgba(255, 255, 255, 0) !important;
                  // background-color: rgb(232, 234, 23);
                  // font-family: 楷体, serif;
                  border: none !important;
                }

                .shiShen3 {
                  width: 13px !important;
                  height: 20px !important;
                  line-height: 13px !important;
                  float: left !important;
                  padding: 0 0 0 16%;
                  font-size: 15px;
                  background-color: rgba(255, 255, 255, 0) !important;
                  // font-family: 楷体, serif;
                  border: none !important;
                }

                // 大运
                .dy {
                  padding-top: 10px;
                  // margin-bottom: -75px;

                  .title {
                    height: 96px;
                    text-align: center;
                    cursor: default;
                    width: 30px;
                    color: #969696;
                    font-size: 15px;
                    line-height: 35px;
                    padding-top: 13px;
                    border: 1px rgb(232, 234, 236) solid;
                    border-left: none;
                    float: left;
                  }

                  .dy-card {
                    width: calc(100% - 30px);
                    height: 100px;
                    border: none;
                    background-color: rgba(255, 255, 255, 0);
                    overflow-x: auto;
                    white-space: nowrap;
                    border-radius: 0;

                    .dy-d {
                      margin: -20px 0 0 -20px;

                      div {
                        cursor: pointer;
                        width: 10.5%;
                        // width: 35px;
                        font-size: 13px;
                        display: inline-block;
                        height: 95px;
                        text-align: center;
                        border: 1px rgb(232, 234, 236) solid;
                        animation: animate 2.5s linear infinite;
                        white-space: normal;
                      }

                      div .div-yes {
                        width: 100%;
                        // width: 42px;
                        height: 21px;
                        // line-height: 19px;
                        text-align: center;
                        color: black;
                        background-color: rgb(232, 234, 236);
                        border: none;
                      }

                      div .div-no {
                        width: 100%;
                        // width: 42px;
                        height: 21px;
                        // line-height: 10px;
                        text-align: center;
                        color: black;
                        border: none;
                      }

                      .xiaoYun {
                        color: rgb(140, 140, 140);
                      }
                    }
                  }

                  .size {
                    font-size: 12px !important;
                    padding-top: 2px;
                  }

                  .bd-l {
                    border-left: none !important;
                  }
                }

                // 流年
                .ln {
                  padding-top: 6px;

                  .title {
                    cursor: default;
                    width: 30px;
                    color: rgb(150, 150, 150);
                    font-size: 15px;
                    line-height: 35px;
                    padding-top: 17px;
                    border-left: none;
                  }

                  div {
                    width: 9%;
                    // width: 42px;
                    font-size: 13px;
                    float: left;
                    height: 96px;
                    text-align: center;
                    border: 1px rgb(232, 234, 236) solid;
                    animation: animate 2.5s linear infinite;
                  }

                  div .div-yes {
                    width: 100%;
                    // width: 42px;
                    height: 21px;
                    // line-height: 10px;
                    text-align: center;
                    color: black;
                    cursor: pointer;
                    background-color: rgb(232, 234, 236);
                    border: none;
                    // animation: animateBorder 2.5s linear infinite;
                  }

                  div .div-no {
                    width: 100%;
                    // width: 42px;
                    height: 21px;
                    // line-height: 10px;
                    text-align: center;
                    color: black;
                    cursor: pointer;
                    border: none;
                  }

                  .size {
                    font-size: 12px;
                    padding-top: 2px;
                  }

                  .null {
                    border: none;
                    color: rgb(130, 130, 130);
                    line-height: 90px;
                  }

                  .bd-l {
                    border-left: none !important;
                  }

                }

                // 小运
                .xy {
                  padding-top: 105px;

                  .title {
                    cursor: default;
                    width: 30px;
                    color: #969696;
                    font-size: 15px;
                    height: 52px;
                    // line-height: 20px;
                    padding-top: 3.5px;
                    border-left: none;
                  }

                  div {
                    width: 9%;
                    // width: 42px;
                    font-size: 13px;
                    float: left;
                    height: 52px;
                    text-align: center;
                    border: 1px rgb(232, 234, 236) solid;
                    animation: animate 2.5s linear infinite;
                  }

                  div .div-yes {
                    width: 100%;
                    // width: 42px;
                    height: 18px;
                    text-align: center;
                    color: black;
                    cursor: pointer;
                    background-color: rgb(232, 234, 236);
                    border: none;
                  }

                  div .div-no {
                    width: 100%;
                    // width: 42px;
                    height: 18px;
                    text-align: center;
                    color: black;
                    cursor: pointer;
                    border: none;
                  }

                  .null {
                    border: none;
                    color: rgb(130, 130, 130);
                    line-height: 50px;
                  }

                  .bd-l {
                    border-left: none !important;
                  }

                }

                // 流月
                .ly {
                  padding-top: 62px;

                  .title {
                    cursor: default;
                    width: 30px;
                    color: #969696;
                    font-size: 15px;
                    padding-top: 14px;
                    border-left: none;
                  }

                  div {
                    width: 7.5%;
                    // width: 35px;
                    font-size: 13px;
                    float: left;
                    height: 70px;
                    text-align: center;
                    border: 1px rgb(232, 234, 236) solid;
                    animation: animate 2.5s linear infinite;
                  }

                  div .div-yes {
                    width: 100%;
                    // width: 42px;
                    height: 20px;
                    text-align: center;
                    color: black;
                    cursor: pointer;
                    background-color: rgb(232, 234, 236);
                    border: none;
                  }

                  div .div-no {
                    width: 100%;
                    // width: 42px;
                    height: 20px;
                    text-align: center;
                    color: black;
                    cursor: pointer;
                    border: none;
                  }

                  .bd-l {
                    border-left: none !important;
                  }
                }

                // 五行旺衰
                .wxws {
                  height: 30px;
                  line-height: 28px;
                  margin-top: 80px;
                  border: rgb(232, 234, 236) 1px solid;
                  background-color: white;
                  border-left: none;
                  border-right: none;

                  .average {
                    font-size: 17px;
                    font-weight: bold;
                    text-align: center;
                  }

                  .ml {
                    margin-left: 45px;
                  }
                }

                // 干支关系
                .gzgx {
                  margin: 9px 0 9px 0;
                  border: rgb(232, 234, 236) 1px solid;
                  padding: 10px;
                  background-color: white;
                  border-left: none;
                  border-right: none;

                  .title {
                    color: rgb(167, 130, 57);
                    font-weight: bold;
                    cursor: pointer;
                  }

                  .mb {
                    margin-bottom: 10px;
                  }

                  .ml {
                    // margin-left: 5px;
                  }

                  .null {
                    color: rgb(150, 150, 150);
                  }

                  .tj {
                    text-align: center;
                    margin: 15px 0 0 0;
                    font-size: 16px;
                    color: rgb(167, 130, 57);

                    .title {
                      cursor: pointer;
                      transition: .3s;
                    }

                    .title:hover {
                      color: rgb(165, 118, 24);
                      transition: .3s;
                    }
                  }
                }

                // 通用彩色边框
                @keyframes animate9 {
                  0% {
                    border-image: linear-gradient(to right, rgb(117, 255, 86) 0%, rgb(160, 255, 255), rgb(255, 160, 255) 100%);
                    border-image-slice: 1;
                    border-width: 1px;
                  }

                  50% {
                    border-image: linear-gradient(to right, rgb(255, 160, 255) 0%, rgb(160, 255, 255), rgb(117, 255, 86) 100%);
                    border-image-slice: 1;
                    border-width: 1px;
                  }

                  100% {
                    border-image: linear-gradient(to right, rgb(117, 255, 86) 0%, rgb(160, 255, 255), rgb(255, 160, 255)100%);
                    border-image-slice: 1;
                    border-width: 1px;
                  }
                }
              }

            }

            // 其他信息
            .qiTa {

              // 彭祖百忌
              .pzbj {
                border-radius: 0;
                background-color: rgb(251, 251, 251);
                border: rgb(232, 234, 236) 1px solid;

                .header2 {
                  font-size: 16px;
                  text-align: center;
                  margin: -12px 0 -20px 0;
                  font-weight: bold;
                  color: rgb(80, 80, 80);
                }

                .title {
                  color: rgb(150, 150, 150);
                  margin-right: 20px;
                }
              }

              // 日柱论命
              .rzlm {
                border-radius: 0;
                margin-top: 10px;
                background-color: rgb(251, 251, 251);
                border: rgb(232, 234, 236) 1px solid;

                .header2 {
                  font-size: 16px;
                  text-align: center;
                  margin: -12px 0 -20px 0;
                  font-weight: bold;
                  color: rgb(80, 80, 80);
                }

                .title {
                  color: rgb(150, 150, 150);
                  margin-right: 20px;
                }
              }

              // 姻缘分析
              .yyfx {
                border-radius: 0;
                margin-top: 10px;
                background-color: rgb(251, 251, 251);
                border: rgb(232, 234, 236) 1px solid;

                .header2 {
                  font-size: 16px;
                  text-align: center;
                  margin: -12px 0 -20px 0;
                  font-weight: bold;
                  color: rgb(80, 80, 80);
                }

                .title {
                  color: rgb(150, 150, 150);
                  margin-right: 20px;
                }

                .mt {
                  margin-top: 10px;
                }
              }

              // 五行分析
              .wxfx {
                border-radius: 0;
                margin-top: 10px;
                background-color: rgb(251, 251, 251);
                border: rgb(232, 234, 236) 1px solid;

                .header2 {
                  font-size: 16px;
                  text-align: center;
                  margin: -12px 0 -20px 0;
                  font-weight: bold;
                  color: rgb(80, 80, 80);
                }

                .title {
                  color: rgb(150, 150, 150);
                  margin-right: 20px;
                }

                .item {
                  line-height: 25px;
                }
              }

              // 骨重
              .gz {
                border-radius: 0;
                margin-top: 10px;
                background-color: rgb(251, 251, 251);
                border: rgb(232, 234, 236) 1px solid;

                .header2 {
                  font-size: 16px;
                  text-align: center;
                  margin: -12px 0 -20px 0;
                  font-weight: bold;
                  color: rgb(80, 80, 80);
                }

                .title {
                  color: rgb(150, 150, 150);
                  margin-right: 20px;
                }

                .item {
                  color: rgb(150, 150, 150);
                }

                .mt {
                  margin-top: 10px;
                }

              }

              // 星宿
              .xx {
                border-radius: 0;
                margin-top: 10px;
                background-color: rgb(251, 251, 251);
                border: rgb(232, 234, 236) 1px solid;

                .header2 {
                  font-size: 16px;
                  text-align: center;
                  margin: -12px 0 -20px 0;
                  font-weight: bold;
                  color: rgb(80, 80, 80);
                }

                .title {
                  color: rgb(150, 150, 150);
                  margin-right: 20px;
                }

                .item {
                  color: rgb(150, 150, 150);
                }

                .mt {
                  margin-top: 10px;
                }
              }

              // 命卦
              .mg {
                border-radius: 0;
                margin-top: 10px;
                background-color: rgb(251, 251, 251);
                border: rgb(232, 234, 236) 1px solid;

                .header2 {
                  font-size: 16px;
                  text-align: center;
                  margin: -12px 0 -20px 0;
                  font-weight: bold;
                  color: rgb(80, 80, 80);
                }

                .title {
                  color: rgb(150, 150, 150);
                  margin-right: 20px;
                }

                .item {
                  color: rgb(150, 150, 150);
                }

                .mt {
                  margin-top: 10px;
                  line-height: 25px;
                }
              }

            }


          }

        }
      }

      /* 1.2、完整数据加载框架 */
      .sl-card2 {
        height: 500px;
        border-radius: 10px;
        margin-right: 10px;
        background-color: white;
      }
    }

  }
}



@media (min-width: 360px) and (max-width: 576px) {
  .sl-card {
    height: auto !important;
  }
  .bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .qy {
    font-size: 11px;
    line-height: 20px;
    height: 45px;
  }
  .bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .ly {
    padding-top: 9px;
    width: 100%;
    overflow-x: scroll;
    display: flex;
}
.bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .ly .title {
  cursor: default;
    min-width: 30px;
    color: #969696;
    font-size: 15px;
    padding-top: 14px;
    border-left: none;
}
.bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .ly div {
  min-width: 10%;
  font-size: 13px;
  float: left;
  height: 70px;
  text-align: center;
  border: 1px rgb(232, 234, 236) solid;
  animation: animate 2.5s linear infinite;
}
  .bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .dy .dy-card .dy-d div {
    width: 12.5%;
  }
  .bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .ln div {
    width: 10%;
  }
  .bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .xy div {
    width: 10%;
  }
  .bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .shiShen1 {
    padding: 2px 12px 0 11%;
  }
  .bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .wxws{
    height: 30px;
    line-height: 28px;
    margin-top: 10px;
    border: rgb(232, 234, 236) 1px solid;
    background-color: white;
    border-left: none;
    border-right: none;
}
.bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .wxws .ml {
  margin-left: 27px;
}
  .bazi .margins .wz-data .wz-card .data .data .mingPan .dyln {
    min-width: auto;
    margin-left: 0;
  }
  .bazi .margins .wz-data .wz-card .data .header .left {
    margin: 0 0 0 6px;
    padding: 5px 0 0 0;
  }
  .bazi .margins .wz-data .wz-card .data .header {
    height: 90px;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb3 .oy {
    font-size: 10px;
    line-height: 30px;
   
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb4 .ml {
    margin-left: 0;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb3 .jianju {
    margin-right: 0;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb1 .bc1 {
    height: auto;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb1 .bc2 {
    height: auto;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb2 {
    height: auto;
  }
  .bazi .margins .sl-data .sl-card .mp {
    border: none;
    margin: 0 0px -20px 0;
    background-color: rgba(255, 255, 255, 0);
}
  :deep(.ivu-select-single .ivu-select-selection .ivu-select-selected-value) {
  
    font-size: 11px;
  }
  .bazi .margins .wz-data .wzqh-card .data .ml {
    margin-left: 0 !important;
  }
  .bazi .margins .wz-data .wz-card .data .header .left {
    font-size: 12px;
  }
  .bazi .margins .wz-data .wzqh-card {
    min-height: auto;
    .data {
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 12px;
      .bazi .margins .wz-data .wzqh-card .data .ml {
        margin-left: 0 !important;
      }
      .button1,.button2,.button3,.button4 {
        font-size: 12px;
        width: 24%;
        height: 50px;
        margin: 0;
        padding: 0;
        display: flex;
        
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        margin-top: 10px;
      }
    }
  }
}

@media (min-width: 576px) and (max-width: 768px) {
  .bazi .margins .wz-data .wz-card .data .header {
    height: 90px;
  }
  .bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .qy {
    font-size: 11px;
    line-height: 20px;
    height: 45px;
  }
  .bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .ly {
    padding-top: 9px;
    width: 100%;
    overflow-x: scroll;
    display: flex;
}
.bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .ly .title {
  cursor: default;
    min-width: 30px;
    color: #969696;
    font-size: 15px;
    padding-top: 14px;
    border-left: none;
}
.bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .ly div {
  min-width: 10%;
  font-size: 13px;
  float: left;
  height: 70px;
  text-align: center;
  border: 1px rgb(232, 234, 236) solid;
  animation: animate 2.5s linear infinite;
}
  .bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .dy .dy-card .dy-d div {
    width: 12.5%;
  }
  .bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .ln div {
    width: 10%;
  }
  .bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .xy div {
    width: 10%;
  }
  .bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .shiShen1 {
    padding: 2px 12px 0 11%;
  }
  .bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .wxws{
    height: 30px;
    line-height: 28px;
    margin-top: 10px;
    border: rgb(232, 234, 236) 1px solid;
    background-color: white;
    border-left: none;
    border-right: none;
}
.bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .wxws .ml {
  margin-left: 27px;
}
  .bazi .margins .wz-data .wz-card .data .header {
    height: 90px;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb3 .oy {
    font-size: 10px;
    line-height: 30px;
   
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb4 .ml {
    margin-left: 0;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb3 .jianju {
    margin-right: 0;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb1 .bc1 {
    height: auto;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb1 .bc2 {
    height: auto;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb2 {
    height: auto;
  }
  .sl-card {
    height: auto !important;
  }
  .bazi .margins .sl-data .sl-card .mp {
    border: none;
    margin: 0 0px -20px 0;
    background-color: rgba(255, 255, 255, 0);
}
.ivu-select-single .ivu-select-selection .ivu-select-selected-value {
  display: block;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-size: 12px;
}
.bazi .margins .sl-data .sl-card .mp {
  border: none;
  margin: 0 0px -20px 0;
  background-color: rgba(255, 255, 255, 0);
}
:deep(.ivu-select-single .ivu-select-selection .ivu-select-selected-value) {

  font-size: 11px;
}
.bazi .margins .wz-data .wzqh-card .data .ml {
  margin-left: 0 !important;
}
.bazi .margins .wz-data .wz-card .data .header .left {
  font-size: 12px;
}
.bazi .margins .wz-data .wzqh-card {
  min-height: auto;
  .data {
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 12px;
    .bazi .margins .wz-data .wzqh-card .data .ml {
      margin-left: 0 !important;
    }
    .button1,.button2,.button3,.button4 {
      font-size: 12px;
      width: 24%;
      height: 50px;
      margin: 0;
      padding: 0;
      display: flex;
      
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      margin-top: 10px;
    }
  }
}
}
@media (min-width: 768px) and (max-width: 992px) {
  .bazi .margins .sl-data .sl-card .mp {
    border: none;
    margin: 0 0px -20px 0;

    background-color: rgba(255, 255, 255, 0);
  }
  .bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .shiShen1 {
    padding: 2px 12px 0 32%;
  }
  .bazi .margins .wz-data .wz-card .data .data .mingPan .dyln .shiShen3 {
    padding: 0 0 0 28%;
  }  .bazi .margins .wz-data .wz-card .data .header {
    height: 90px;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb3 .oy {
    font-size: 10px;
    line-height: 30px;
   
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb4 .ml {
    margin-left: 0;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb3 .jianju {
    margin-right: 0;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb1 .bc1 {
    height: auto;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb1 .bc2 {
    height: auto;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb2 {
    height: auto;
  }
  :deep(.ivu-select-single .ivu-select-selection .ivu-select-selected-value) {
  
    font-size: 11px;
  }
  .bazi .margins .wz-data .wzqh-card .data .ml {
    margin-left: 0 !important;
  }
  .bazi .margins .wz-data .wz-card .data .header .left {
    font-size: 12px;
  }
  .bazi .margins .wz-data .wzqh-card {
    min-height: auto;
    .data {
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 12px;
      .bazi .margins .wz-data .wzqh-card .data .ml {
        margin-left: 0 !important;
      }
      .button1,.button2,.button3,.button4 {
        font-size: 12px;
        width: 24%;
        height: 50px;
        margin: 0;
        padding: 0;
        display: flex;
        
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        margin-top: 10px;
      }
    }
  }
 
}
@media(max-width: 1024px) {
  .bazi .margins .wz-data .wz-card .data .header {
    height: 90px;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb3 .oy {
    font-size: 10px;
    line-height: 30px;
   
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb4 .ml {
    margin-left: 0;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb3 .jianju {
    margin-right: 0;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb1 .bc1 {
    height: auto;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb1 .bc2 {
    height: auto;
  }
  .bazi .margins .wz-data .wz-card .data .data .jiBen .jb2 {
    height: auto;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {

 
}
@media (min-width: 1200px) {
  
}